<template>
    <div>
        <search-form :showArea="true" @search="getDataList"></search-form>
        <h1>本区域综合评价分析-雷达图</h1>
        <div id="main" style="height: 500px;width: 100%;"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
import SearchForm from '@/components/search-form'

export default {
    components: {SearchForm},
    data () {
        return {
            title: {},
            legendData: [],
            indicatorData: [],
            seriesData: []
        }
    },
    mounted () {
        this.init()
        // 基于准备好的dom，初始化echarts实例

    },

    methods: {
        init () {
            this.getDataList({
                evalYear: wfy.format('yyyy',new Date()),
                userId: 1
            })
        },
        getDataList (params, done) {
            this.dataListLoading = true
            this.$http({
                url: this.$http.adornUrl('/admin/analysis/result'),
                method: 'post',
                params: this.$http.adornParams(
                    params
                )
            }).then(({data}) => {

                console.info('--------------')
                console.info(data)
                this.dataListLoading = false
                this.seriesData = data.seriesData
                console.info(this.seriesData)
                this.indicatorData = data.indicatorParams
                console.info(this.indicatorData)
                this.legendData = data.regionList
                console.info(this.legendData)
                var myChart = echarts.init(document.getElementById('main'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: ''
                    },
                    legend: {
                        x: 'center', // 图例水平居中
                        y: 'bottom', // 图例垂直居上
                        data: this.legendData //['东城区', '门头沟区']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'top',
                        feature: {
                            saveAsImage: {show: true},  // 保存图表
                        },
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: this.indicatorData
                        /****
             [
             { name: 'Sales', max: 6500 },
             { name: 'Administration', max: 16000 },
             { name: 'Information Technology', max: 30000 },
             { name: 'Customer Support', max: 38000 },
             { name: 'Development', max: 52000 },
             { name: 'Marketing', max: 25000 }
             ]*/
                    },
                    series: [
                        {
                            name: '区域对比分析图',
                            type: 'radar',
                            data: this.seriesData
                            /**[
               {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '东城区'
                        },
               {
                            value: [5000, 14000, 28000, 26000, 42000, 21000],
                            name: '门头沟区'
                        }
               ]**/
                        }
                    ]
                })

                if (done) {
                    done()
                }
            })
        }

    },
}
</script>
<style>
h1 {
    text-align: center;
    color: gray;
}
</style>
